<template>
  <div class="chart-wrap">
    <div class="wu-chart" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { setAutoHoverIntervalFun } from '@/utils/echartUtils'
let wuChartRef = ref()
let wuChart: echarts.ECharts = {} as echarts.ECharts

// 造数据
interface channelType {
  name: string
  value: string
  percentage: string
}
const getXData = () => {
  let yData: channelType[] = [
    { name: '携程', value: '10', percentage: '10%' },
    { name: '飞猪', value: '20', percentage: '20%' },
    { name: '智慧文旅', value: '40', percentage: '40%' },
    { name: '其他渠道', value: '30', percentage: '30%' }
  ]
  let colors = ['#f8456b', '#0e7ce2', '#ff8352', '#e271de']
  return {
    yData,
    colors
  }
}
const chartData = getXData()

const options: echarts.EChartOption = {
  color: chartData.colors,
  grid: {
    left: 60,
    right: 30,
    top: 40,
    bottom: 40
  },
  legend: {
    show: true,
    orient: 'vertical',
    left: 20,
    top: '50px',
    textStyle: {
      color: '#fff'
    },
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 20,
    formatter: (name) => {
      const curItem = chartData.yData.find((item) => item.name === name)
      return `${name}-----${curItem?.percentage}`
    }
  },
  tooltip: {
    show: true,
    trigger: 'item',
    formatter: (param: unknown) => {
      const { name, value, data, marker } = param as {
        name: string
        value: string
        data: channelType
        marker: string
      }
      return `<div class="chart-tooltip">
        <span>
          ${marker} ${name}： ${value}人 ${data.percentage}
        </span>
        </div>`
    },
    extraCssText: 'padding: 0;border: none;background-color:transparent;'
  },
  series: [
    {
      type: 'pie',
      center: ['65%', '50%'],
      radius: ['45%', '75%'],

      itemStyle: {
        // color: '#f0b454',
        borderType: 'solid',
        borderWidth: 10,
        borderColor: '#11144e'
      },
      label: {
        show: false
      },
      data: chartData.yData
    },
    {
      type: 'pie',
      center: ['65%', '50%'],
      radius: ['90%', '91%'],
      silent: true,
      itemStyle: {
        color: function (params: any) {
          const colors = [
            '#0e7ce2',
            'transparent',
            '#0e7ce2',
            'transparent',
            '#0e7ce2',
            'transparent'
          ]
          return colors[params.dataIndex]
        },
        borderType: 'solid',
        borderWidth: 10
        // borderColor: '#11144e'
      },
      label: {
        show: false
      },
      data: [
        { name: '', value: 60 },
        { name: '', value: 60 },
        { name: '', value: 60 },
        { name: '', value: 60 },
        { name: '', value: 60 },
        { name: '', value: 60 }
      ]
    },
    {
      type: 'pie',
      center: ['65%', '50%'],
      radius: ['0%', '30%'],
      label: {
        show: false
      },
      itemStyle: {
        color: 'none',
        borderType: 'dashed',
        borderDashOffset: 50,
        borderColor: '#686a8f',
        borderWidth: 1
      },
      data: [100]
    }
  ]
}
// 停止播放函数
let stopFun: Function
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
  const { init, stop } = setAutoHoverIntervalFun(wuChart, chartData.yData)
  init()
  stopFun = stop
})
onUnmounted(() => {
  stopFun()
})
</script>

<style lang="scss" scoped></style>
